<template>
  <div class="app-container">
    <div style="padding: 10px;">
      <el-button type="primary" @click="handleWindowPrint( '#demo', '用印流水号-'+sealId )">打印</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
      </el-button>
    </div>

    <div id="demo">
      <p style="padding: 10px;">【用章申请】 &nbsp &nbsp流水号-{{ sealId }}</p>

      <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0"
             width="0" style="border-collapse:collapse;border:none;margin-left:6.8pt;
 margin-right:6.8pt;height:auto;width:auto"
      >
        <tr style="height:6.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;padding:
  0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >姓名</span></p>
          </td>
          <td width="262" colspan="2" style="width:196.75pt;border:solid windowtext 1.0pt;
  border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="margin-top:0cm;margin-right:-5.45pt;margin-bottom:
  0cm;margin-left:-4.4pt;margin-bottom:.0001pt;text-indent:80.45pt;line-height:22.0pt"
            ><span
              lang="EN-US" style="font-size:14.0pt;font-family:仿宋;letter-spacing:
  2.15pt"
            >&nbsp;{{ sealForm.userName }}</span></p>
          </td>
          <td width="76" style="width:2.0cm;border:solid windowtext 1.0pt;border-left:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >部门</span></p>
          </td>
          <td width="151" style="width:4.0cm;border:solid windowtext 1.0pt;border-left:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:6.25pt"
          >
            <p class="MsoNormal" style="text-align:center;"
            ><span lang="EN-US" style="font-size:14.0pt;font-family:仿宋;letter-spacing:
  2.15pt"
            >&nbsp;{{ sealForm.userDept }}</span></p>
          </td>
        </tr>
        <tr style="height:104.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:104.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >印章类别</span></p>

          </td>
          <td width="262" colspan="2" style="width:196.75pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:104.25pt"
          >
            <p class="MsoNormal" style="margin-top:0cm;margin-right:-5.45pt;margin-bottom:
  0cm;margin-left:-4.4pt;margin-bottom:.0001pt;line-height:22.0pt" v-for="(item,index) in sealType" :key="index"
            >
                  <span style="font-size:15.0pt;font-family:仿宋">
                  &#9745{{ item }}
                  </span>
            </p>
          </td>
          <td width="76" style="width:2.0cm;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;
  height:104.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >申请日期</span></p>
          </td>
          <td width="151" style="width:4.0cm;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;
  height:104.25pt"
          >
            <p class="MsoNormal" style="text-align:center;"><span style="font-size:16.0pt;font-family:仿宋;"
            >{{ sealForm.createTime }}</span>
            </p>
          </td>
        </tr>
        <tr style="height:60.65pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:60.65pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >标题或事由</span></p>
          </td>
          <td width="489" colspan="4" valign="top" style="width:366.85pt;border-top:none;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:60.65pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;"
            ><span lang="EN-US" style="font-size:14.0pt;font-family:仿宋">&nbsp;{{ sealForm.sealTitle }}</span></p>
          </td>
        </tr>
        <tr style="height:37.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >发送单位</span></p>
          </td>
          <td width="489" colspan="4" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:16.0pt;font-family:仿宋"
            >&nbsp;{{ sealForm.sentDept }}</span></p>
          </td>
        </tr>
        <tr align="center" style="height:37.25pt;text-align:center;">
          <td width="123" align="center" style="text-align:center;width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span style="font-size:16.0pt;
  font-family:仿宋;letter-spacing:2.15pt"
            > 盖章文件</span></p>
          </td>

          <td width="489" colspan="4" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >

            <el-link :href="`${baseUrl}${file}`" v-for="(file, index) in fileList" :key="index" :underline="false"
                     target="_blank"
            >
                  <span class="MsoNormal" style="margin:12px;font-size:13.0pt;font-family:仿宋">  {{
                      getFileName(file)
                    }} </span>
            </el-link>
          </td>
        </tr>
        <tr style="height:37.25pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center;line-height:22.0pt"><span
              style="font-size:16.0pt;font-family:仿宋;letter-spacing:2.15pt"
            >文件份数</span></p>
          </td>
          <td width="489" colspan="4" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:37.25pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:16.0pt;font-family:仿宋"
            >&nbsp;{{ sealForm.fileNum }}</span></p>
          </td>
        </tr>
        <tr style="height:35.9pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:35.9pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >科室负责人</span></p>
          </td>
          <td width="134" style="width:100.6pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.9pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >{{ sealForm.deptMaster }}</span></p>
          </td>
          <td width="128" style="width:96.15pt;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.9pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >批准人</span></p>
          </td>
          <td width="227" colspan="2" style="width:6.0cm;border-top:none;border-left:none;
  border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.9pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >{{ sealForm.sealMaster }}</span></p>
          </td>
        </tr>
        <tr style="height:88.4pt">
          <td width="123" style="width:92.15pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >备<span lang="EN-US">&nbsp;&nbsp;&nbsp; </span>注</span></p>
          </td>
          <td width="489" colspan="4" style="width:366.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:15.0pt;font-family:仿宋"
            >&nbsp;{{ sealForm.userRemarks }}</span></p>
          </td>
        </tr>
        <tr style="height:35.4pt">
          <td width="123" style="width:92.4pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >科室审核人</span></p>
          </td>
          <td width="183" colspan="2" style="width:137.35pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" style="margin-top:0cm;margin-right:-5.45pt;margin-bottom:
  0cm;margin-left:-4.4pt;margin-bottom:.0001pt;line-height:22.0pt"
            >
              <span v-show="sealForm.deptIdea==='0'"
                    style="font-size:15.0pt;font-family:仿宋"
              >□同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>□不同意
                </span>

              <span v-show="sealForm.deptIdea==='1'"
                    style="font-size:15.0pt;font-family:仿宋"
              >&#9745同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>□不同意
                </span>

              <span v-show="sealForm.deptIdea==='2'"
                    style="font-size:15.0pt;font-family:仿宋"
              >□同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>&#9745不同意
                </span>
            </p>
          </td>
          <td width="306" colspan="3" style="width:229.25pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="left" style="text-align:left"><span style="font-size:
  16.0pt;font-family:仿宋"
            >{{ sealForm.deptRemarks }}</span></p>
          </td>
        </tr>

        <tr style="height:35.4pt">
          <td width="123" style="width:92.4pt;border:solid windowtext 1.0pt;border-top:
  none;padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:16.0pt;font-family:仿宋"
            >用印审批人</span></p>
          </td>
          <td width="183" colspan="2" style="width:137.35pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" style="margin-top:0cm;margin-right:-5.45pt;margin-bottom:
  0cm;margin-left:-4.4pt;margin-bottom:.0001pt;line-height:22.0pt"
            >

              <span v-show="sealForm.sealIdea==='0'"
                    style="font-size:15.0pt;font-family:仿宋"
              >□同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>□不同意
                </span>

              <span v-show="sealForm.sealIdea==='1'"
                    style="font-size:15.0pt;font-family:仿宋"
              >&#9745同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>□不同意
                </span>

              <span v-show="sealForm.sealIdea==='2'"
                    style="font-size:15.0pt;font-family:仿宋"
              >□同意
                  <span lang="EN-US">&nbsp; &nbsp;</span>&#9745不同意
                </span>
            </p>
          </td>
          <td width="306" colspan="3" style="width:229.25pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:35.4pt"
          >
            <p class="MsoNormal" align="left" style="text-align:left"><span style="font-size:
  16.0pt;font-family:仿宋"
            >{{ sealForm.sealRemarks }}</span></p>
          </td>
        </tr>

      </table>
    </div>

    <div class="shengpiForm">
      <div style="margin-bottom:30px">审核区域</div>
      <el-form ref="sealForm" :model="shengpiForm">
        <div style="width:80%">
          <file-upload v-model="fileList" :isShowDelete="false" :isShowTip="false" :isShowUpload="false"/>
        </div>
        <el-form-item label="用印审批人意见:" prop="deptIdea">
          <el-select
            v-model="sealForm.sealIdea" placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-form-item label="备注" prop="sealRemarks" style="margin:15px 0px">
            <el-input v-model="sealForm.sealRemarks" type="textarea" style="width:400px" placeholder="请输入内容"/>
          </el-form-item>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addSeal, deptApproval, getSealByDept, getSealByMaster, masterApproval } from '@/api/seal/seal'
import htmlToPdf from '@/utils/htmlToPdf'

export default {
  name: 'masterShengHe',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      approvalLogs: [],
      sealId: null,
      sealForm: [],
      sealType: [],
      fileList: [],
      options: [{
        id: 1,
        value: '1',
        label: '同意'
      }, {
        id: 2,
        value: '2',
        label: '不同意'
      }
      ],
      shengpiForm: {}
    }
  }
  ,
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  }
  ,
  created() {
    this.sealId = this.$route.query.sealId
    this.getSealValue()
  }
  ,

  methods: {
    getList() {
      if (0) {
        this.$message.error('id不能为空，请从下下载！')
        this.goBack()
      } else {
        this.$http({
          url: this.$http.adornUrl(`/sys/sysapprovelog/list`),
          method: 'post',
          data: {
            approve_type: 6
          }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.approvalLogs = data.sysApproveLogs

          }
        })
      }

    }
    ,
    handleWindowPrint(ele, fileName) {
      // 留存原来的 html
      // let bdHtml = window.document.body.innerHTML;
      // let bdHtml = document.querySelector('#app').innerHTML;

      // 要打印的 内容 html
      // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;

      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'  // 生成pdf的外部css样式
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      document.body.innerHTML = document.querySelector(ele).outerHTML

      // window.print();

      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)

      // 重新设会当前页面
      // window.document.body.innerHTML = bdHtml;
      // document.querySelector('#app').innerHTML =  bdHtml;
      // 刷新页面
      // window.location.reload();
    }
    ,
    getSealValue() {
      getSealByMaster(this.sealId).then((response) => {
        this.sealForm = response.data
        if (this.sealForm.sealIdea == '0') {
          this.sealForm.sealIdea = '1'
        }
        if (this.sealForm.sealType) {
          this.sealType = this.sealForm.sealType.split(',')
        }
        if (this.sealForm.sealFile) {
          this.fileList = this.sealForm.sealFile.split(',')
        }
      })
    }
    ,
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf('/') > -1) {
        var name1 = name.slice(name.lastIndexOf('/') + 1)
        return name1.substring(0, name1.lastIndexOf('_')) + '.' + name1.slice(name1.lastIndexOf('.') + 1)
      } else {
        return ''
      }
    },

    submitForm() {
      this.$refs['sealForm'].validate(valid => {
        if (valid) {
          masterApproval(this.sealForm).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess('流水号为：' + this.sealId + '的用印申请审核成功')
              this.getSealValue()
              this.goBack()
            } else {
              this.$modal.msgError('流水号为：' + this.sealId + '的用印申请审核失败')
              this.goBack()
            }

          })
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
    ,
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#demo'), '用印流水号' + '-流水号：' + this.$route.query.sealId)
    }
  }
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="Microsoft Word 15 (filtered)">
<style>

  /* Font Definitions */
  @font-face {
    font-family: 宋体;
    panose-1: 2 1 6 0 3 1 1 1 1 1;
  }

  @font-face {
    font-family: 黑体;
    panose-1: 2 1 6 9 6 1 1 1 1 1;
  }

  @font-face {
    font-family: "Cambria Math";
    panose-1: 2 4 5 3 5 4 6 3 2 4;
  }

  @font-face {
    font-family: Calibri;
    panose-1: 2 15 5 2 2 2 4 3 2 4;
  }

  @font-face {
    font-family: 仿宋;
    panose-1: 2 1 6 9 6 1 1 1 1 1;
  }

  @font-face {
    font-family: "\@仿宋";
  }

  @font-face {
    font-family: "\@宋体";
    panose-1: 2 1 6 0 3 1 1 1 1 1;
  }

  @font-face {
    font-family: "\@黑体";
    panose-1: 2 1 6 0 3 1 1 1 1 1;
  }

  /* Style Definitions */
  p.MsoNormal, li.MsoNormal, div.MsoNormal {
    margin: 0cm;
    margin-bottom: .0001pt;
    text-align: justify;
    text-justify: inter-ideograph;
    font-size: 10.5pt;
    font-family: "Calibri", sans-serif;
  }

  .MsoChpDefault {
    font-size: 10.0pt;
    font-family: "Calibri", sans-serif;
  }

  /* Page Definitions */
  @page WordSection1 {
    size: 595.3pt 841.9pt;
    margin: 72.0pt 90.0pt 72.0pt 90.0pt;
    layout-grid: 15.6pt;
  }

  div.WordSection1 {
    page: WordSection1;
  }

</style>

</head>

<style scoped>
#demo {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  height: 100%;
  margin: auto;
  padding: 30px;
  box-sizing: border-box;
}

.shengpiForm {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  height: 100%;
  margin: auto;
  padding: 5px 40px;
  box-sizing: border-box;
}
</style>
